<template>
  <div class="full-height page-content bg-white content">
    <q-tabs
      v-model="tab"
      narrow-indicator
      inline-label
      dense
      align="left"
      style="padding: 10px 4px 0"
      v-throttle="500"
      indicator-color="primary"
      active-color="primary"
      class="tab-label"
    >
      <q-tab
        v-for="item in tabOptions"
        :key="item.value"
        :name="item.value"
        :label="item.label"
      />
    </q-tabs>
    <q-separator class="" />
    <q-tab-panels
      v-model="tab"
      animated
      class="no-padding"
      style="border-radius: 6px;height: calc(100% - 46px)"
    >
      <q-tab-panel
        :name="item.value"
        class="no-padding"
        v-for="item in tabOptions"
        :key="item.value"
      >
        <component :is="isShowTab" class="full-height padding-10"></component>
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>
<script>
// import _ from 'lodash'
import roleDefine from './role-define'
import roleMenu from './role-menu'
import userMana from './user-mana'
import departList from '../factory/depart-list'
export default {
  name: 'user-menu',
  components: { userMana, roleMenu, departList, roleDefine },
  props: {},
  data () {
    return {
      tabMap: [roleDefine, roleMenu, departList, userMana],
      tab: 0,
      tabOptions: [
        {
          label: '角色列表',
          value: 0
        },
        {
          label: '角色权限',
          value: 1
        },
        {
          label: '部门列表',
          value: 2
        },
        {
          label: '用户列表',
          value: 3
        }
      ]
    }
  },
  created () {},
  computed: {
    isShowTab () {
      return this.tabMap[this.tab]
    }
  },
  methods: {},
  mounted () {}
}
</script>
